<!DOCTYPE HTML>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta th:include="front/fragments :: head(~{::title})">
    <!--打字机效果-->
    <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script>
    <script>
        $(function () {
            var typed = new Typed("#subtitle", {
                strings: ['能够通过人传授的智慧来躲避的困难实在少之又少。真正要掌握的，并不是有关某个问题的知识，而是寻找那个问题的方法。那样的东西可不是一朝一夕能掌握过来的。'],
                startDelay: 300,
                typeSpeed: 100,
                loop: true,
                backSpeed: 50,
                showCursor: true
            });
        });
    </script>
    <script type="text/javascript" src="/static/front/js/echarts.min.js"></script>
</head>

<body>
<!--header-->
<header th:replace="front/fragments :: header"></header>
<!--end header-->

<!--bgcover-->
<div th:replace="front/fragments :: bgcover"></div>
<!--end bgcover-->

<div id="app">
    <!--content-->
    <main class="content">
        <div id="cd-timeline" class="container">
            <div class="cd-timeline-block" v-for="(article, index) in articles" :key="article.id">
                <div class="cd-timeline-img year" data-aos="zoom-in-up" v-show="isShow(article.createTime,'y')">
                    <span href="javascript:;">{{getSpecific(article.createTime,'y')}}</span>
                </div>
                <div class="cd-timeline-img month" data-aos="zoom-in-up" v-show="isShow(article.createTime,'m')">
                    <span href="javascript:;">{{getSpecific(article.createTime,'m')}}</span>
                </div>
                <div class="cd-timeline-img day" data-aos="zoom-in-up">
                    <span>{{getSpecific(article.createTime,'d')}}</span>
                </div>
                <article class="cd-timeline-content" data-aos="fade-up">
                    <div class="article col s12 m6">
                        <div class="card">
                            <a :href="'/article/'+article.id">
                                <div class="card-image">
                                    <img class="responsive-img lazy" src="https://cdn.jsdelivr.net/gh/geek-cy/img/blog/miku.jpg"
                                         :data-src="article.cover">
                                    <span class="card-title">{{article.title}}</span>
                                </div>
                            </a>
                            <div class="card-content article-content">
                                <div class="summary block-with-text">{{article.summary}}</div>
                                <div class="publish-info">
                                    <span class="publish-date">
                                        <i class="far fa-clock fa-fw icon-date"></i>{{article.createTime | dateFormat}}</span>
                                    <span class="publish-author">
                                        <i class="fas fa-bookmark fa-fw icon-category"></i>
                                        <a :href="'/page/categories?id='+article.category.id" class="post-category">{{article.category.name}}</a>
                                     </span>
                                </div>
                            </div>
                            <div class="card-action article-tags">
                                <a :href="'/page/tags?id='+tag.id" v-for="(tag, index) in article.tagList"><span
                                        class="chip bg-color">{{tag.name}}</span></a>
                            </div>
                        </div>
                    </div>
                </article>



            </div>
        </div>
    </main>
    <!--end content-->
    <!--pagination-->
    <div class="container paging">
        <div class="row">
            <!--左边按钮-->
            <div class="col s4 m4 l4">
                <a class="left btn-floating btn-large waves-effect waves-light" @click="toPage(current-1)"
                   href="#cd-timeline"
                   :class="{disabled: current == 1}">
                    <i class="fas fa-angle-left"></i>
                </a>
            </div>
            <!--分页信息-->
            <div class="page-info col s4 m4 l4">
                <div class="center-align b-text-gray">{{current}} / {{pages}}</div>
            </div>
            <!--右边按钮-->
            <div class="col s4 m4 l4">
                <a class="right btn-floating btn-large waves-effect waves-light"
                   @click="toPage(current+1)" href="#cd-timeline" :class="{disabled: current == pages}">
                    <i class="fas fa-angle-right"></i>
                </a>
            </div>
        </div>
    </div>
    <!--end pagination-->
</div>

<!--footer-->
<footer th:replace="front/fragments :: footer"></footer>
<!--end footer-->

<!--commons-->
<div th:replace="front/fragments :: commons"></div>
<!--end commons-->

<!--vue-->
<script type="text/javascript">
    Date.prototype.format = function (fmt) {
        var o = {
            "M+": this.getMonth() + 1, //月份
            "d+": this.getDate(), //日
            "h+": this.getHours(), //小时
            "m+": this.getMinutes(), //分
            "s+": this.getSeconds(), //秒
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度
            "S": this.getMilliseconds() //毫秒
        };
        if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    }
    let curYear = 0, curMonth = 0;
    const app = new Vue({
        el: '#app',
        data: {
            calendarData: [],
            current: 1,
            pages: 1,
            articles: [],
        },
        methods: {
            getCalendarData: function () {
                axios({
                    url: '/archives',
                    method: 'GET',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                }).then((result) => {
                    console.log(this.articles)
                    let archivesData = result.data;
                    this.calendarData = archivesData.articleDates.map(item => {
                        return [item.date, item.articleCount];
                    });
                    let pageInfo = archivesData.pageInfo;
                    this.articles = pageInfo.records;
                    this.current = pageInfo.current;
                    this.pages = pageInfo.pages;
                    this.$nextTick(function () {
                        this.initCalendar(this.calendarData);
                        lazyLoadInstance.update();
                    })
                })
            },
            // shubiaochufa
            toPage: function (page) {
                if (page >= 1 && page <= this.pages) {
                    this.current = page;
                    this.getArchives(page);
                    $(window).scrollTo('#cd-timeline', 1000);
                }
            },
            initCalendar: function (data) {

                let myChart = echarts.init(document.getElementById('post-calendar'));

                let dayTime = 3600 * 24 * 1000;
                let endTime = +echarts.number.parseDate(new Date());
                let startTime = +(endTime - 365 * dayTime);
                let startDate = new Date(startTime).format('yyyy-MM-dd');
                let endDate = new Date(endTime).format('yyyy-MM-dd');

                function getData() {
                    var date = data.map(item => item[0]);
                    var res = [];
                    for (var time = startTime; time <= endTime; time += dayTime) {
                        let formatTime = echarts.format.formatTime('yyyy-MM-dd', time);
                        let count = 0;
                        let index = date.indexOf(formatTime);
                        if (index !== -1) {
                            count = data[index][1];
                        }
                        res.push([formatTime, count]);
                    }
                    return res;
                }

                let option = {
                    title: {
                        top: 0,
                        text: '文章日历',
                        left: 'center',
                        textStyle: {
                            color: '#3C4858'
                        }
                    },
                    tooltip: {
                        padding: 10,
                        backgroundColor: '#555',
                        borderColor: '#777',
                        borderWidth: 1,
                        formatter: function (obj) {
                            var value = obj.value;
                            return '<div style="font-size: 14px;">' + value[0] + '：' + value[1] + '</div>';
                        }
                    },
                    visualMap: {
                        show: true,
                        showLabel: true,
                        categories: [0, 1, 2, 3, 4],
                        calculable: true,
                        inRange: {
                            symbol: 'rect',
                            color: ['#ebedf0', '#c6e48b', '#7bc96f', '#239a3b', '#196127']
                        },
                        itemWidth: 12,
                        itemHeight: 12,
                        orient: 'horizontal',
                        left: 'center',
                        bottom: 0
                    },
                    calendar: [{
                        left: 'center',
                        range: [startDate, endDate],
                        cellSize: [14, 14],
                        splitLine: {
                            show: false
                        },
                        itemStyle: {
                            color: '#196127',
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        yearLabel: {
                            show: true,
                        },
                        monthLabel: {
                            nameMap: 'cn',
                            fontSize: 11
                        },
                        dayLabel: {
                            formatter: '{start}  1st',
                            nameMap: 'cn',
                            fontSize: 11
                        }
                    }],
                    series: [{
                        type: 'heatmap',
                        coordinateSystem: 'calendar',
                        calendarIndex: 0,
                        data: getData(),
                    }]

                };

                myChart.setOption(option);
            },
            getArchives: function (current) {
                axios({
                    url: '/archives-articles',
                    params: {
                        current: current,
                    },
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    method: 'GET'
                }).then((result) => {
                    this.articles = result.data.records;
                    this.current = result.data.current;
                    this.pages = result.data.pages;
                    curYear = 0, curMonth = 0;
                    this.$nextTick(function () {
                        lazyLoadInstance.update();
                    });
                })
            },
            getSpecific: function (date, type) {
                date = this.$options.filters['dateFormat'](date);
                let arr = date.split('-');
                if (type === 'y') {
                    return arr[0];
                } else if (type === 'm') {
                    return arr[1];
                } else if (type === 'd') {
                    return arr[2];
                }
            },
            isShow: function (time, type) {
                let date = this.$options.filters['dateFormat'](time);
                if (type === 'y') {
                    let year = this.getSpecific(date, type);
                    if (year !== curYear) {
                        curYear = year;
                        return true;
                    }
                    return false;
                } else if (type === 'm') {
                    let month = this.getSpecific(date, type);
                    if (month !== curMonth) {
                        curMonth = month;
                        return true;
                    }
                    return false;
                }
            },
        },
        created() {
            this.getCalendarData();

        },
        filters: {
            dateFormat: function (value) {
                return moment(value).format("YYYY-MM-DD");
            }
        },
    });

</script>

<!--scripts-->
<div th:replace="front/fragments :: scripts"></div>
<!--end scripts-->
</body>

</html>
